<template>
  <div ref="box" class="layout" @mouseup="handleMouseup">
    <!--    创建生产树形结构-->
    <div ref="treeRef" class="tree-container">
      <ul class="headerTop">
        <li>{{ $t('menu.treeProduction') }}<!--树形生产管理--></li>
        <li>
          <el-radio-group v-model="radio4" size="mini" @change="radioHandel">
            <el-radio-button :label="$t('market.deaprt')" /><!--部门-->
            <el-radio-button :label="$t('market.workOrder')" /><!--工单-->
          </el-radio-group>
        </li>
      </ul>
      <div style="background: #FFF;">
        <el-input v-model.trim="filterText" placeholder="输入关键字进行过滤" size="mini" style="max-width: 400px;margin: 5px;" />
        <el-tree
          ref="tree"
          :data="data"
          node-key="fentryId"
          default-expand-all
          :expand-on-click-node="false"
          class="tree"
          highlight-current
          :indent="0"
          :filter-node-method="filterNode"
          @node-click="selectNode"
        >
          <span slot-scope="{node, data}" class="custom-tree-node">
            <div class="title-tree">
              <el-input
                v-if="node.level === 1"
                v-model="data.label"
                size="mini"
                :placeholder="$t('market.pleaseMarket')"
                class="treeInput"
                @keyup.enter.native="queryTPrdMoDetails(data.label)"
              />
              <span v-show="node.level === 1 && data.fname"> - {{ data.fname }}</span>
              <span v-show="node.level === 2">{{ data.fname }}</span>
              <!--              <el-tooltip class="item" :open-delay="openDelay" effect="dark" :content="data.fdescripTion" placement="top-start">-->
              <span v-show="node.level === 3">{{ data.fnumber }} - {{ data.fmodel || '暂无填写型号' }} - {{ data.materialName || data.fdescripTion }}</span>
              <!--              </el-tooltip>-->
              <i v-show="node.level === 1" :class="data.icon" @click.stop="handleMateriel(data, node)" />
            </div>
          </span>
        </el-tree>
      </div>
    </div>
    <div ref="resize" class="resize" @mousedown="handleResize" />
    <div ref="mid" class="operation">
      <div v-show="bomType === 3">
        <h2>{{ $t('market.leftDate') }}<!--请点击左侧数据--></h2>
      </div>
      <!--生产订单汇总列表-->
      <div v-show="bomType === 2">
        <productionDetails
          :msg="fbillNo"
          :fdept-id="fdeptId"
          :dh="fdeptDH"
          :fworkshop="fworkshop"
          @order="orderDate"
          @userNo="userNumber"
        />
      </div>
      <!--生产用料订单修改-->
      <div v-show="bomType === 1">
        <productionEdit :msg="userNo" :fseq="fseq" />
      </div>
      <!--委外用料订单修改-->
      <div v-show="bomType === 0">
        <productionOutEdit :msg="userNo1" />
      </div>
      <!--生产订单修改-->
      <div v-show="bomType === 21">
        <proOrderDetails :msg="userNo2" @userNo="userNumber" @reload="queryTPrdMoDetails" />
      </div>
      <!--委外订单修改-->
      <div v-show="bomType === 22">
        <outOrderDetails :msg="userNo3" @userNo="userNumber" @reload="queryTPrdMoDetails" />
      </div>
    </div>
    <!--  订单汇总列表弹窗  -->
    <orderDialog v-if="isorderlDialog" @order="orderDate" />
  </div>
</template>

<script>
import getForm from '@/views/engineering/createBom/components/getForm'
import { queryTPrdMoDetailsWithDept } from '@/api/production/productionList'
export default {
  name: 'TreeProduction',
  components: {
    productionDetails: () => import('@/views/production/productionDetails'),
    productionEdit: () => import('@/views/production/collect/productionEdit'),
    productionOutEdit: () => import('@/views/production/productionPicking/productionOutEdit'),
    proOrderDetails: () => import('@/views/production/collect/proOrderDetails'),
    outOrderDetails: () => import('@/views/production/productionPicking/outOrderDetails'),
    orderDialog: () => import('@/views/production/treeProduction/dialog')
  },
  mixins: [getForm],

  data() {
    const data = [{
      label: '', // 供应商名称
      fbillNo: '', // ID
      fname: '', // 编码
      fentryId: 0,
      icon: 'el-icon-search',
      children: []
    }]
    return {
      radio4: '工单',
      openDelay: 300, // 提示 延迟出现，单位毫秒
      isorderlDialog: false, // 选择销售订单弹窗
      data: JSON.parse(JSON.stringify(data)),
      bomType: 3, // 1为bom， 2为物料， 3为未选中
      delNodeId: '', // 选中node节点
      fid: '', // 价目表id
      addBtn: 1, // 是否禁止添加节点
      fbillNo: '', // 生产订单汇总列表
      fdeptId: '', // 生产订单汇总列表
      fdeptDH: '', // 生产订单汇总列表
      userNo1: '', // 委外用料订单修改
      userNo: '', // 生产用料订单修改
      fworkshop: '', // 生产订单汇总列表-部门
      fseq: '', // 行号
      nodeType: '2',
      userNo2: '',
      userNo3: '',
      filterText: ''
    }
  },
  watch: {
    // 过滤
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    if (this.$route.query.fbillNo) {
      this.queryTPrdMoDetails(this.$route.query.fbillNo)
    }
  },
  methods: {
    // 鼠标按下
    handleResize(e) {
      const {
        resize,
        box,
        treeRef: left,
        mid
      } = this.$refs
      resize.style.background = '#818181'
      const startX = e.clientX
      resize.left = resize.offsetLeft
      document.onmousemove = function(e) {
        const endX = e.clientX
        let moveLen = resize.left + (endX - startX)
        const maxT = box.clientWidth - resize.offsetWidth
        if (moveLen < 32) {
          moveLen = 32
        }
        if (moveLen > maxT - 150) {
          moveLen = maxT - 150
        }
        resize.style.left = moveLen
        left.style.width = moveLen + 'px'
        mid.style.width = (box.clientWidth - moveLen - 10) + 'px'
      }
    },
    // 鼠标松开
    handleMouseup() {
      const {
        resize
      } = this.$refs
      resize.style.background = '#d6d6d6'
      document.onmousemove = null
      document.onmouseup = null
      resize.releaseCapture && resize.releaseCapture()
    },
    // 节点被点击时的回调
    selectNode(data, node) {
      this.node = node
      // data.label 为fbillNo
      if (node.level === 1 && data.label) { // 一级
        this.bomType = 2
        this.fbillNo = data.label
        this.fdeptId = 0
        this.fdeptDH = ''
        this.fworkshop = ''
      } else if (node.level === 2) { // e二级
        if (this.nodeType === '2') { // 工单
          const sc = node.data.fname.indexOf('生产') !== -1
          if (sc) {
            this.bomType = 21
            this.userNo2 = node.data.dh
          } else {
            this.bomType = 22
            this.userNo3 = node.data.dh
          }
        } else { // 部门
          this.bomType = 2
          this.fdeptId = data.fid
          this.fdeptDH = ''
        }
        this.fworkshop = data.fname
      } else if (node.level === 3 && data.ftype === '生产订单') { // 用料单
        this.bomType = 1
        this.userNo = data.userNo
        this.fseq = data.fseq
      } else if (node.level === 3 && data.ftype === '委外订单') { // 用料单
        this.bomType = 0
        this.userNo1 = data.userNo
      }
    },
    handleMateriel() {
      this.isorderlDialog = true
    },
    orderDate(ev) {
      if (ev.fbillNo) {
        this.data[0].fname = ev.fpaezText
        this.data[0].label = ev.fbillNo
        // this.bomType = 2
        this.fbillNo = ev.fbillNo
        this.queryTPrdMoDetails()
      }
      this.isorderlDialog = false
    },
    // 点击用料单号返回
    userNumber(ev, en) {
      if (en === 0) {
        this.bomType = 1
        this.userNo = ev
      } else {
        this.bomType = 0
        this.userNo1 = ev
      }
    },
    radioHandel() {
      if (this.radio4 === '工单') {
        this.nodeType = '2'
        this.queryTPrdMoDetails()
      } else {
        this.nodeType = '1'
        this.queryTPrdMoDetails()
      }
    },
    // 获取左侧数据
    async queryTPrdMoDetails(ev) {
      if (ev) {
        this.fbillNo = ev
      }
      const DATA = {
        fbillNo: this.fbillNo,
        nodeType: this.nodeType
      }
      if (!this.fbillNo) return
      const { data: RES, code, message } = await queryTPrdMoDetailsWithDept(DATA)
      if (code !== 0) {
        this.$confirm(message, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        })
        return
      }
      this.data[0].children = RES.details
      this.data[0].fname = RES.fpaezText
      this.data[0].label = RES.fbillNo
      this.data[0].children.map((item, index) => {
        item.children = item.list
        item.list.map(ite => {
          ite.dh = ite.fbillNo
          if (ite.ftype === 0) {
            ite.ftype = '生产订单'
          } else {
            ite.ftype = '委外订单'
          }
          ite.fdescript = ite.fdescripTion.slice(0, 10) + '...'
        })
      })
    },
    // 过滤
    filterNode(value, data) {
      if (!value) return true
      if (!data.dh) return
      return data.dh.indexOf(value) !== -1
    }
  }
}
</script>

<style scoped lang="scss">
@import "src/styles/tree/index";
.operation {
  overflow-x: hidden!important;
  background: #fff;
}
.layout::v-deep .tree-container{
  width: 26vw;
}
.layout .tree-container .tree {
  width: 100%;
  height: calc(100vh - 180px)!important;
  overflow: auto;
}
.treeInput {
  width: 120px;
  &::v-deep .el-input__inner {
    padding: 0 5px;
    height: 20px;
  }
}
.headerTop {
  padding: 5px 0;
  background: #ecf5ff;
  margin: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.content {
  padding: 0!important;
  @include bomCreate;

  .bom-form {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;

    .btn {
      transform: translateY(18%);
      margin-left: 450px !important;
    }
  }
}
</style>

